<template>
    <div class="userDetail">
        <div class="head">
            <div class="title">个人目标设置</div>
            <div class="replace" @click="replace">重置</div>
        </div>
        <div class="content">
            <div class="targetWeight">
                <div class="label">目标体重</div>
                <div class="input">
                    <input @click="writeData('targetWeight')" v-model="targetWeight" type="text"
                        placeholder="请输入目标体重"><i>kg</i>
                </div>
                <div class="advice">建议健康体重范围：45-65 kg</div>
            </div>
            <div class="targetIntake">
                <div class="label">每日目标摄入热量</div>
                <div class="input">
                    <input @click="writeData('targetIntake')" v-model="targetIntake" type="text"
                        placeholder="请输入目标摄入热量"><i>kcal</i>
                </div>
                <div class="advice">推荐每日摄入热量：1800-2200 kcal</div>
            </div>
            <div class="targetConsume">
                <div class="label">每日目标消耗热量</div>
                <div class="input">
                    <input @click="writeData('targetConsume')" v-model="targetConsume" type="text"
                        placeholder="请输入目标消耗热量"><i>kcal</i>
                </div>
                <div class="advice">轻度运动建议：300-500 kcal</div>
            </div>
        </div>
        <div class="foot">
            <van-button type="primary" size="large" @click="btn">保存设置</van-button>
        </div>
    </div>
    <van-number-keyboard :show="show" theme="custom" extra-key="." close-button-text="完成" @blur="show = false"
        @input="onInput" @delete="onDelete" />
</template>

<script setup>
import { ref } from 'vue';
import { showConfirmDialog } from 'vant';
import { writeTargetData, getTargetData } from '@/api/index.js'
import { showSuccessToast, showFailToast } from 'vant';
import { useRouter } from 'vue-router';
import { onBeforeMount } from 'vue';


const show = ref(false);
const targetWeight = ref('')
const targetIntake = ref('')
const targetConsume = ref('')
const flag = ref('')
const router = useRouter()


onBeforeMount(async () => {
    const res = await getTargetData()
    // console.log(res);

    if (res.data.length) {
        router.push('/recordWeight')
    }
})

const writeData = (str) => {
    show.value = true;
    flag.value = str;
}

const onInput = (val) => {
    if (flag.value === 'targetWeight') {
        if (val === '.' && targetWeight.value.includes('.')) return
        if (targetWeight.value && targetWeight.value.includes('.') && targetWeight.value.split('.')[1].length >= 1) return
        targetWeight.value += val
    } else if (flag.value === 'targetIntake') {
        if (val === '.' && targetIntake.value.includes('.')) return
        if (targetIntake.value && targetIntake.value.includes('.') && targetIntake.value.split('.')[1].length >= 1) return
        targetIntake.value += val
    } else if (flag.value === 'targetConsume') {
        if (val === '.' && targetConsume.value.includes('.')) return
        if (targetConsume.value && targetConsume.value.includes('.') && targetConsume.value.split('.')[1].length >= 1) return
        targetConsume.value += val
    }
}

const onDelete = () => {
    if (flag.value === 'targetWeight') {
        targetWeight.value = targetWeight.value.slice(0, -1)
    } else if (flag.value === 'targetIntake') {
        targetIntake.value = targetIntake.value.slice(0, -1)
    } else if (flag.value === 'targetConsume') {
        targetConsume.value = targetConsume.value.slice(0, -1)
    }
}

// 重置数据
const replace = () => {
    showConfirmDialog({
        message:
            '您确认要重置数据吗。',
    })
        .then(() => {
            // on confirm
            targetWeight.value = ''
            targetIntake.value = ''
            targetConsume.value = ''
        })
        .catch(() => {
            // on cancel
        });
}

// 写入用户的数据
const btn = async () => {
    if (targetWeight.value && targetIntake.value && targetConsume.value) {
        const res = await writeTargetData({ targetWeight: Number(targetWeight.value), targetIntake: Number(targetIntake.value), targetConsume: Number(targetConsume.value) })
        // console.log(res);
        showSuccessToast(res.msg)
        router.push('/recordWeight')
    } else {
        showFailToast('请填写全部的数据')
    }

}

</script>

<style lang="less" scoped>
.userDetail {
    .head {
        display: flex;
        align-items: center;
        padding: 0.32rem 0.43rem 0.32rem 3.76rem;
        justify-content: space-between;
        box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

        .title {
            font-weight: 500;
            font-size: 0.43rem;
            color: #000000;
            line-height: 0.64rem;
        }

        .replace {
            font-weight: 400;
            font-size: 0.37rem;
            color: #3176FF;
            line-height: 0.53rem;
        }
    }

    .content {
        box-sizing: border-box;
        height: calc(100vh - 120px);
        background-color: #F9FAFB;
        padding: 0.43rem;

        .targetWeight,
        .targetIntake,
        .targetConsume {
            background-color: #fff;
            padding: 0.43rem;
            margin-bottom: .64rem;

            .label {
                font-weight: 500;
                font-size: 0.43rem;
                color: #000000;
                line-height: 0.64rem;
                margin-bottom: .4267rem;
            }

            .input {
                display: flex;
                align-items: center;
                margin-bottom: .32rem;

                input {
                    border-radius: .1067rem;
                    border: 1px solid #E5E7EB;
                    padding: 0.32rem 0.43rem;
                    font-weight: 400;
                    font-size: 0.43rem;
                    color: #9CA3AF;
                    line-height: 0.64rem;
                    width: 100%;
                    box-sizing: border-box;

                }

                i {
                    font-weight: 400;
                    font-size: 0.37rem;
                    color: #6B7280;
                    line-height: 0.56rem;
                    margin-left: .32rem;
                }
            }

            .advice {
                font-weight: 400;
                font-size: 0.37rem;
                color: #6B7280;
                line-height: 0.53rem;
            }
        }
    }

    .foot {
        padding: 0.32rem .4267rem;
    }
}
</style>